<template>
  <el-dialog
    title="外勤打卡明细"
    v-model="visible"
    width="40%"
    destroy-on-close
  >
    <scTable
      ref="recordTable"
      :data="outList"
      row-key="id"
      stripe
      hideRefresh
      hideSetting
      hidePagination
    >
      <el-table-column label="打卡时间" prop="attendanceTime" min-width="150">
      </el-table-column>
      <el-table-column label="地址" prop="address" min-width="150">
      </el-table-column>
      <el-table-column label="打卡图片" prop="url" min-width="150">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.url"
            :preview-src-list="scope.row.previewSrcList"
            :initial-index="0"
            preview-teleported
            fit="cover"
          />
        </template>
      </el-table-column>
    </scTable>
  </el-dialog>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      visible: false,
      outList: []
    }
  },
  methods: {
    open (data) {
      console.log(data)
      this.visible = true
      this.outList = data.outChildList
      this.outList.forEach(item => {
        item.previewSrcList = [item.url]
      })
    }
  }
}
</script>